<!-- 我的账户 -->
<template>
	<view class="container" v-if="ifShow">
		<view class="balance">
		</view>
		<view class="balanceInfo">
			<view class="infoBox">
				<view class="infoBoxName">总额度(券)</view>
				<view class="infoBoxNum">{{userBalance}}</view>
				<view class="infoBoxDate">有效期至：{{validDate}}</view>
				<!-- <view v-if="accountInfo.price != null " class="cur-balance">{{accountInfo.price}}</view>
				<view v-else class="cur-balance">0.00</view>
				<view class="mar-top-20">余额</view> -->
				<view class="infoBoxBtn" @click="useTap">去使用</view>
			</view>
		</view>
		<view class="Xfwrap">
			<view class="XfwrapTitle">消费记录</view>
			<view class="XfwrapList" v-for="(item,index) in historyList" :key="index">
				<image class="XfwrapListImg" :src="item.image"></image>
				<view class="XfwrapListInfo">
					<view class="XfwrapListInfoname">{{item.productName}}</view>
					<view class="XfwrapListInfoDate">{{item.consumeTime}}</view>
				</view>
				<view class="XfwrapP">-{{item.amount}}</view>
			</view>
		</view>
<!-- 		<view class="balance-operation">
			<view class="item-btn" @click="memberAccountWithdraw">
				<image class="item-btn-icon" src="https://ceres.zkthink.com/static/images/withdraw.png" mode="widthFix">
				</image>
				<view class="item-btn-text">提现</view>
				<image class="item-btn-right" src="https://ceres.zkthink.com/static/images/greyArrow.png"
					mode="widthFix"></image>
			</view>
		</view> -->
	</view>
</template>

<script>
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	export default {
		data() {
			return {
				accountInfo: [],
				ifShow: false,
				userBalance:0,
				historyList:[],
				validDate:''
			}
		},
		onShow() {
			this.getBalance()
		},
		onBackPress(e) {
			if (e.from === 'navigateBack') {
				return false;
			}
			this.back();
			return true;
		},
		methods: {
			back() {
				uni.switchTab({
					url: '../../pages/tabbar/user/index'
				});
			},
			getBalance() {
				const _ = this
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				NET.request(API.historyList+'?type=1', {}, "GET").then(res => {
					uni.hideLoading()
					this.ifShow = true
					this.userBalance = res.data.userBalance
					this.historyList = res.data.historyList
					this.validDate = res.data.validDate
				}).catch(res => {

				})
			},
			memberAccountWithdraw() {
				if (this.accountInfo.price <= 0) {
					uni.showToast({
						title: "您暂时没有余额，不能提现",
						duration: 2000,
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: 'withdraw'
					})
				}
			},
			useTap(item) {
			    uni.navigateTo({
			     url: `../../pages_category_page1/goodsModule/goodsList?band=5&name=行服商品`
			    })
			   }
		},
		filters: {
			parseMoney(money) {
				return parseFloat(money / 100).toFixed(2)
			}
		}
	}
</script>
<style>
</style>
<style lang="scss">
	page {
		background: #F8F8F8;
	}

	.container {
		background: #f8f8f8;

		.balance {
			display: block;
			height: 300rpx;
			background: url("../../static/images/user/Group277.png") no-repeat left top;
			background-size: cover;
			background-color: #F4C749;
			text-align: center;
			padding: 100rpx 20rpx 0 20rpx;
		}

		.balanceInfo {
			width: 690rpx;
			background: linear-gradient(132deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 100%);
			// background: url("https://ceres.zkthink.com/static/images/accountBg.png") no-repeat left top;
			border-image: linear-gradient(127deg, rgba(255, 255, 255, 1), rgba(247, 185, 102, 1), rgba(255, 255, 255, 0.2)) 2 2;
			height: 216rpx;
			// background-size: cover;
			margin: -200rpx auto 0 auto;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 40upx;
			position: relative;
			.infoBox {
				.infoBoxName{
					font-size: 24upx;
					color: #333;
				}
				.infoBoxNum{
					font-size: 64upx;
					color: #EFB257;
					// font-weight: bold;
					margin-top: 8upx;
				}
				.infoBoxDate{
					font-size: 28upx;
					color: #EFB257;
					// font-weight: bold;
				}
				.cur-balance {
					font-size: 60rpx;
					color: #71521B;
				}
				.infoBoxBtn{
					width: 200upx;
					height: 88upx;
					background-color: #EFB257;
					color: #fff;
					line-height: 88upx;
					text-align: center;
					border-radius: 100upx;
					position: absolute;
					right: 24upx;
					top: 65upx;
				}
			}
		}
		.Xfwrap{
			width: 690upx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 16upx;
			box-sizing: border-box;
			padding: 0 24upx 24upx 24upx;
			margin-top: 32upx;
			max-height:700upx;
			overflow: auto;
			.XfwrapTitle{
				height: 92upx;
				line-height: 92upx;
				font-size: 32upx;
				color: #333
			}
			.XfwrapList{
				height: 138upx;
				border-top: 1px solid #F6F6F6;
				display: flex;
				align-items: center;
				.XfwrapListImg{
					width: 88upx;
					height: 88upx;
					border-radius: 8upx;
					margin-right: 24upx;
				}
				.XfwrapListInfo{
					width: 440upx;
					.XfwrapListInfoname{
						width: 200upx;
						color: #333;
						font-size: 28upx;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
					}
					.XfwrapListInfoDate{
						font-size: #999;
						font-size: 24upx;
					}
				}
			}
			.XfwrapP{
				font-size: 28upx;
				color: #EF1414;
				font-weight: bold;
			}
		}
		.balance-operation {
			margin-top: 38rpx;
			padding: 0 24rpx;

			.item-btn {}
		}
	}

	.item-btn {
		width: 100%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-sizing: border-box;
		background-color: #fff;
		padding: 0 30upx;

		.item-btn-icon {
			width: 90upx;
			height: 90upx;
		}

		.item-btn-text {
			font-size: 28upx;
			margin-left: 20upx;
			font-weight: 500;
			flex: 1;
			color: rgba(102, 102, 102, 1);
		}

		.item-btn-right {
			width: 60upx;
			height: 60upx;
		}

	}

	.mt20 {
		margin-top: 20upx;
	}

	.mt1 {
		margin-top: 1upx;
	}
</style>
